<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{title}}</span>
    </div>
    <!-- 查询区域 -->
    <el-form :model="queryParams" :ref="queryFormRef" inline v-show="showSearch" @keyup.enter.native="handleQuery">
        <el-form-item label-width="0px" prop="keywords" style="width: 150px;">
          <el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable style="width: 150px;"/>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="tool-bar-btn">
      <el-button type="primary" icon="el-icon-plus"  @click="toAdd" >选择用户</el-button>
      <el-button type="danger" icon="el-icon-delete"  :disabled="multiple" @click="handleRemove">移除</el-button>
    </div>

    <selected-info :count="selectedRows.length" :onClearSelected="onClearSelected" />
    <el-table :ref="dataTableRef" v-loading="loading" :data="dataList" stripe border @selection-change="onSelectChange"
          :default-sort = "defaultSort" @sort-change="onSortChange" :row-key="rowKey" >
      <el-table-column type="selection" width="55" align="center" fixed="left"/>
      <el-table-column label="登录账号" align="center" prop="username"  width="150" sortable="custom"/>
      <el-table-column label="真实姓名" align="center" prop="realname"  width="120" />
      <el-table-column label="昵称" align="center" prop="nickName"  width="150" />
      <el-table-column label="状态" align="center" prop="statusDictText" width="80">
        <template slot-scope="{row}"><UserStatus :value="row.status" :text="row.statusDictText" /></template>
      </el-table-column>
      <el-table-column label="用户类型" align="center" prop="userTypeDictText" width="100"/>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="100" >
        <template slot-scope="{row}">
          <el-button type="text" icon="el-icon-delete" @click="handleRemove(row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="!loading" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" 
      @pagination="getList" layout="total, sizes, prev, pager, next"/>

    <SelectUserDialog ref="selectUserDialog" @ok="handleAddUser"/>

  </el-card>
</template>

<script>
import {httpPost} from '@/api';
import { IndexListMixin } from '@/components/mixins/IndexListMixin';
import SelectUserDialog from '@/views/system/user/selectUserDialog';

export default {
  name: "RoleUserList",
  mixins:[IndexListMixin],
  components: {
    SelectUserDialog
  },
  props: {
    roleId: {
      type: String,
      require: true
    },
    roleName:{
      type: String,
      require: true
    }
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        roleId: '',
        selectType: 'roleUser',
        usernameKey: null,
        realnameKey: null,
        pageNum: 1,
        pageSize: 10
      },
      url: {
      	list: '/sys/user/toSelectList',
        remove: '/sys/userRole/delByRole/',
        addUser: '/sys/userRole/addByRole/'
      }
    };
  },
  created() {
  },
  computed:{
    title(){
      return this.$stringFormat("【{0}】角色的用户", this.roleName);
    }
  },
  watch:{
    roleId(newVal){
      this.queryParams.roleId = newVal;
      if(newVal){
        this.getList();
      }else{
        this.dataList = [];
        this.total = 0;
      }
    }
  },
  mounted(){
  },
  methods: {
    getList() {
      this.loadData(this.url.list);
    },

    /** 新增按钮操作 */
    toAdd() {
      this.$refs.selectUserDialog.openD({queryData:{
        selectType:'roleToSelectUser',
        roleId: this.roleId
      }});
    },

    /** 删除按钮操作 */
    handleRemove(row) {
      const ids = row.id || this.selectedRowKeys.join()
      this.deleteData(this.url.remove + this.roleId + '?userId='+ids, []);
    },

    handleAddUser(userIds, users){
      httpPost(this.url.addUser, {roleId: this.roleId, userId: userIds.join()}).then(response => {
        if (response && response.success) {
          this.msgSuccess("添加成功");
          this.getList();
        }
      }).catch(()=>{}).finally(()=>{
        this.loading = false;
      });
    }

  }
};
</script>
